<!-- 求职信息页面 -->
<template>
  <div class="root_style">
      <reception-header/>

      <div class="user">
        <div class="da-wrapper">
          <div class="da-content">
            <!-- 头部搜索 -->
            <div class="form-style">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                  <el-input v-model="formInline.hunterName" placeholder="请输入求职者名字" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input placeholder="请输入求职岗位名称" v-model="formInline.positionName" class="input-with-select" clearable>
                    <el-select v-model="formInline.workAddress" slot="prepend" placeholder="工作地点" clearable>
                      <template v-for="(item) in areaList">
                        <el-option :label="item.area" :value="item.area" :key="item.aid"></el-option>
                      </template>                 
                    </el-select>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
              </el-form>

                <!-- 求职信息列表 -->
              <div class="recruit-container">
                <div  @click="toJobInfoDetailHandle(item.userJobAid)" class="recruit-div" v-for="(item,index) in jobInfoList" :key="index">
                  <el-row>
                    <el-col :span="12">
                      <span class="pos-style">{{item.position}}<el-tag effect="dark" type="success" size="mini" class="xiao-style">{{item.jobType}}</el-tag></span>
                    </el-col>
                    <el-col :span="12" class="right-style">
                      <span class="salary_style">{{item.salary}}&emsp;</span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-tag effect="plain" type="success" size="mini" class="tagbiaoqian-style">{{item.jobAddress.substr(0,4)}}</el-tag>
                      <el-tag effect="plain" type="success" size="mini" class="tagbiaoqian-style">{{item.hunterPublishTime.substr(0,10)}}</el-tag>
                    </el-col>
                    <el-col :span="12" class="right-style">
                      <span class="company-name">求职者</span>
                      <img class="img-style" :src="item.avatar ? item.avatar : 'https://recruitment-files.oss-cn-chengdu.aliyuncs.com/user/jianyeu1.png'" alt="">
                      <span class="hr-style">{{item.hunterName}}</span>
                    </el-col>
                  </el-row>
                </div>
              </div>

              <!-- 分页 -->
              <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageRow"
                :total="total"
                @current-change="page">
              </el-pagination>

            </div>
          </div>
        </div>
      </div>
      <!-- 最底部 -->
      <the-footer/>
  </div>
</template>

<script>
import ReceptionHeader from '../../../components/ReceptionHeader.vue';
import TheFooter from '../../../components/The-Footer.vue';
import { areaList } from '../../../assets/data/dataView';
import { getAllHunterInfoAndHunterPublishInfo } from '../../../api/jobInfoManageApi/index';
export default {
  name: "JobInfoPage",
  components:{
    ReceptionHeader,
    TheFooter
  },
  data(){
    return{
      formInline: {
        hunterName: '',
        positionName: '',
        workAddress: '',
      },
      areaList: [],
      jobInfoList: [],
      pageRow: 10,
      total: 100,
    }
  },
  created(){
    this.areaList = areaList;
    // 得到全部求职者信息和求职者发布的求职信息
    this.getAllHunterInfoAndHunterPublishInfoFunc();
  },
  methods:{
    onSubmit() {
       this.getAllHunterInfoAndHunterPublishInfoFunc();
    },

    // 得到全部求职者信息和求职者发布的求职信息
    getAllHunterInfoAndHunterPublishInfoFunc(){
        // 发送请求
      const params = {
          hunterName: this.formInline.hunterName,
          positionName: this.formInline.positionName,
          workAddress: this.formInline.workAddress,
          page: 1,  
          pageRow: this.pageRow, // 每页行数
      }
      getAllHunterInfoAndHunterPublishInfo(params).then(res=>{
        // console.log(res.data.data);
        this.jobInfoList = res.data.data.jobInfoList;
        this.total = res.data.data.totalNum;
      })
    },

    // 去该用户的求职列表页面
    toJobInfoDetailHandle(userJobAid){
      this.$router.push({
        path: '/reception/userPage',
        query: {
          userJobAid,
        }
      });
    },

    page(currentPage){
       // 发送请求
      const params = {
          hunterName: this.formInline.hunterName,
          positionName: this.formInline.positionName,
          workAddress: this.formInline.workAddress,
          page: currentPage,  
          pageRow: this.pageRow, // 每页行数
      }
      getAllHunterInfoAndHunterPublishInfo(params).then(res=>{
        this.jobInfoList = res.data.data.jobInfoList;
        this.total = res.data.data.totalNum;
      })
    },

  }

}
</script>

<style scoped>
@import '../../../assets/css/reception/jobInfoPage.css';
</style>
